<template>
	<div id="app">
		<ExampleView a="1" :count="count" v-bind="params" />
		{{ AppCount }}
		<el-button type="primary" @click="change">change</el-button>
		<hr />
		<div class="warper" ref="warper">{{ warper }}</div>
		<el-button type="default" @click="getWarper">get warper</el-button>
		<hr />
		<DialogComponent :visible="visible" />
		<el-button
			type="default"
			@click="visible = true"
			@update:visible="visible = false"
		>
			open dialog
		</el-button>
	</div>
</template>

<script>
// import Vue from 'vue';
const state = { AppCount: 1 };
import ExampleView from '@/components/example.vue';
import DialogComponent from '@/components/dialog.vue';
// import Counter from '@/components/a';
export default {
	name: 'App',
	components: {
		ExampleView,
		DialogComponent
		// Counter: Vue.extend({
		// 	template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
		// 	data: function () {
		// 		return {
		// 			firstName: 'Walter',
		// 			lastName: 'White',
		// 			alias: 'Heisenberg'
		// 		};
		// 	}
		// })
	},
	data() {
		return {
			...state,
			visible: false,
			count: 1,
			warper: 1,
			params: {
				index: 1,
				page: 1,
				pageSize: 10,
				lilmt: '20'
			}
		};
	},
	created() {
		// console.log(this);
		// this.$data.c = 'c';
		// console.log(this.$data);
	},
	methods: {
		change() {
			this.AppCount++;
		},
		async getWarper() {
			this.warper++;
			await this.$nextTick();
			console.log(this.$refs.warper.innerHTML);
		}
	}
};
</script>

<style></style>
